<!DOCTYPE>
<html   xmlns:th="http://www.thymeleaf.org/">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>个人中心-借贷记录</title>
  <meta name="keywords" content="">
  <meta name="description" content="">

  <div th:include="includeJs::includeJs"></div>
  <div th:include="includeJs::layui_js"></div>

  <link rel="stylesheet" th:href="@{/css/account/lay-cz.css}">
  <link rel="stylesheet" th:href="@{/css/userInfo/common.css}">
  <link rel="stylesheet" th:href="@{/css/userInfo/user.css}">
  <link rel="stylesheet" th:href="@{/css/userInfo/fileupload.less.css}">
  <script type="text/javascript" th:src="@{/js/jquery.min.js}"></script>
  <script type="text/javascript" th:src="@{/js/userInfo/common.js}"></script>
  <script type="text/javascript" th:src="@{/js/userInfo/user.js}"></script>
  <!--vue,axios-->
  <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.min.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.19.2/axios.min.js"></script>
  <style>
    .layui-table td, .layui-table th {
      position: relative;
      padding: 8px 12px;
      min-height: 20px;
      line-height: 20px;
      font-size: 14px;
    }
  </style>
</head>
<body>
<!--最上面-->
<link th:replace="includeJs::dingding_header">
<!--第二上面-->
<div style="background-color: white;width: 100%">
  <link th:replace="includeJs::dingding_nav">
</div>
<!--个人中心-->
<div class="wrapper wbgcolor">
  <div class="w1200 personal">
    <link th:replace="includeJs::userInfoMenu">
    <div class="personal-main">
      <div class="personal-money" id="app">
        <h3><i>借贷记录</i></h3>
        <table class="layui-table" lay-skin="line">
          <thead>
          <tr>
            <th>借贷时间</th>
            <th>借贷类型</th>
            <th>借贷金额</th>
            <th>每月还款</th>
            <th>已还金额</th>
            <th>待还金额</th>
            <th>借贷期数</th>
            <th>待还期数</th>
            <th>订单状态</th>
            <th>操作</th>
          </tr>
          </thead>
          <tbody>
          <tr v-for="(ls,index) in loans" :key="ls.l_id" >
            <td v-text="ls.order_time"></td>
            <td v-if="ls.loan_type==1">信用贷</td>
            <td v-if="ls.loan_type==2">抵押贷</td>
            <td v-if="ls.loan_type==3">微妙贷</td>
            <td v-text="ls.max_money"></td>
            <td v-text="ls.r_money"></td>
            <td>{{ls.already_month*ls.r_money | numFilter}}</td>
            <td v-text="ls.surplus_money"></td>
            <!--<td v-if="ls.order_state=='已放款'" v-text="ls.r_money*ls.residue_money">
            </td>
            <td v-else v-text="0">
            </td>-->
            <td v-text="ls.l_month"></td>
            <td v-text="ls.l_month-ls.already_month"></td>
            <td v-text="ls.order_state"></td>
            <td v-if="ls.order_state=='已放款'">
              <button @click="repayment(ls.l_id)" class="layui-btn layui-btn-sm layui-btn-normal layui-btn-radius">还款</button>
            </td>
            <td v-else-if="ls.order_state=='未通过'">
              <button @click="nopass(ls.audit_comment)"  class="layui-btn layui-btn-sm  layui-btn-danger  layui-btn-radius">未通过</button>
            </td>
            <td v-else-if="ls.order_state=='审核中'">
              <button @click="cancel(index)"  class="layui-btn layui-btn-sm  layui-btn-danger  layui-btn-radius">取消借贷</button>
            </td>
            <td v-else-if="ls.order_state=='已通过'">
              <button @click="pass(index)"  class="layui-btn layui-btn-sm  layui-btn-warm  layui-btn-radius">已通过</button>
            </td>
            <td v-else-if="ls.order_state=='已取消'">
              <button  class="layui-btn layui-btn-sm  layui-btn-disabled  layui-btn-radius">已取消</button>
            </td>
            <td v-else-if="ls.residue_money==0">
              <button @click="repayment(ls.l_id)"  class="layui-btn layui-btn-sm  layui-btn-radius">已还清</button>
            </td>
            <td v-else>
              <button  class="layui-btn layui-btn-sm  layui-btn-disabled  layui-btn-radius">未放款</button>
            </td>
          </tr>
          </tbody>
        </table>
        <!--分页  居中显示-->
        <center>
          <div id="fengye"></div>
        </center>
      </div>
    </div>
  </div>
</div>
<div id="password-div" class="password-div" style="display: none;margin-left: 120px;margin-top: 35px;">
  <label id="pwd" for="password" class="password-lable">
    <ul>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
    </ul>
    <input id="password" type="password" name="password" maxlength="6">
  </label>
  <div style="margin-top: 50px;margin-left: 50px;">
    <button type="button" id="qdcz" class="layui-btn layui-btn-danger  layui-btn-radius" style="width: 100px;">确定</button>
  </div>
</div>
<link th:replace="includeJs::userInfoJS">
</body>
<script>
  //使用Vue渲染模板,初始化时是没有数据的,需要axios请求拿到数据
  let vue = new Vue({
    el: "#app",
    data: {
      loans:null
    },
    filters: {
      numFilter (value) {
        let realVal = ''
        if (!isNaN(value) && value!== '') {
          // 截取当前数据到小数点后两位
          realVal = parseFloat(value).toFixed(2)
        } else {
          realVal = '--'
        }
        return realVal
      }
    },
    methods:{
      //还款弹窗
       repayment:(lid)=>{
        layer.open({
          title:'借贷还款',
          type: 2,
          area: ['500', '520px'],
          fixed: false, //不固定
          maxmin: true,
          content: '/loanHistory/'+lid,
          cancel: function(){//右上角关闭回调
            //刷新父页面成功
            window.location.reload();
          }
        });
      },
      //未审核提示
      nopass:(comment)=>{
         layer.alert(comment)
      },
      //审核中自己取消
      cancel:(index)=>{
        let loan = vue.loans[index];
        let params = new URLSearchParams();
        params.append("lid",loan.l_id);
        layer.confirm(
        '提交审核金额: '+loan.l_money+'<br>'+
        '贷款月数: '+loan.l_month+'<br>',
        {
          btn: ['确定','再想想'], //按钮
          title: '确认取消此贷款'
        }, function(){
          params.append("flag",false);
          axios({
            method: 'post',
            url:'/confirm',
            headers: { 'content-type': 'application/x-www-form-urlencoded'},
            data: params
          });
          vue.loans[index].order_state='已取消'
          parent.layer.closeAll()
        }, function(){
          parent.layer.closeAll()
        });
      },
      //已审核确认
      pass:(index)=>{
        let loan = vue.loans[index];
        let params = new URLSearchParams();
        params.append("lid",loan.l_id);
        layer.confirm(
           '提交金额: '+loan.l_money+'<br>'+
           '审核金额: '+loan.max_money+'<br>'+
           '每月还款金额: '+loan.r_money+'<br>'+
           '贷款月数: '+loan.l_month+'<br>'+
           '备注: '+loan.audit_comment,
        {
          btn: ['确定','不需要'], //按钮
          title: '确认此贷款'
        }, function(){
             //打开密码框
            // layer.open({
            //   type: 1,
            //   title: '请输入支付密码',
            //   skin: 'layui-layer-demo', //样式类名
            //   area: ['450px', '200px'],
            //   closeBtn: 2, //不显示关闭按钮
            //   fixed: false, //不固定
            //   maxmin: true,
            //   content: $('#password-div'),
            //   cancel: function(){//右上角关闭回调
            //     //刷新父页面
            //     window.location.reload();
            //   }
            // });
            // $("#pwd").focus();
            params.append("flag",true);
            axios({
              method: 'post',
              url:'/confirm',
              headers: { 'content-type': 'application/x-www-form-urlencoded'},
              data: params
            })/*.then(res=>{
              //res.data;
            })*/;
            vue.loans[index].order_state='放款中'
            parent.layer.closeAll()
        }, function(){
            params.append("flag",false);
            axios({
              method: 'post',
              url:'/confirm',
              headers: { 'content-type': 'application/x-www-form-urlencoded'},
              data: params
            });
            vue.loans[index].order_state='已取消'
        });
      }
    }
  });

  //数据总行数
  let count = [[${lscount}]];
  //借贷每种状态
  let ls0 = [[${T(com.ddf.publics.tool.Constant).LOAN_ORDER_STATE_NO_PASS}]];
  let ls1 = [[${T(com.ddf.publics.tool.Constant).LOAN_ORDER_STATE_AUDIT}]];
  let ls2 = [[${T(com.ddf.publics.tool.Constant).LOAN_ORDER_STATE_PASS}]];
  let ls3 = [[${T(com.ddf.publics.tool.Constant).LOAN_ORDER_STATE_LOAN_ING}]];
  let ls4 = [[${T(com.ddf.publics.tool.Constant).LOAN_ORDER_STATE_LOAN_SUCCESS}]];
  let ls5 = [[${T(com.ddf.publics.tool.Constant).LOAN_ORDER_STATE_EMPTY}]];
  let ls6 = [[${T(com.ddf.publics.tool.Constant).NLOAN_ORDER_STATE_CACEL}]];

  layui.use(['laypage', 'layer'], function() {
    let laypage = layui.laypage;
    //总页数低于页码总数
    laypage.render({
      //url:"/",
      elem: 'fengye'
      ,limit:5
      //,curr: location.href.replace('#!fenye=','')
      //,hash: 'fenye'
      ,count: count //数据总数
      ,page: {limit:5,page:1,limits:[10,20,30],layout: ['count', 'prev', 'page', 'next', 'limit', 'refresh', 'skip']}
      ,jump:function(obj,first){   //当我点击跳转页面时会执行另一个axios
        let params = new URLSearchParams();
        params.append("page",obj.curr);
        params.append("limit",obj.limit);
        axios({
          method: 'post',
          url:'/loanList',
          headers: { 'content-type': 'application/x-www-form-urlencoded'},
          data: params
        }).then(res=>{
          let data = res.data;
          //数据格式化
          data.forEach(function (d) {
            d.order_time = d.order_time.substr(0,19).replace("T"," ");
            d.order_time = mytime(d.order_time);
            switch (d.order_state) {
              case ls0:
                d.order_state="未通过";
                //待还期数计算为0
                d.already_month = d.l_month;
                break;
              case ls1:
                d.order_state="审核中";
                d.already_month = d.l_month;
                break;
              case ls2:
                d.order_state="已通过";
                break;
              case ls3:
                d.order_state="放款中";
                d.already_month = d.l_month;
                break;
              case ls4:
                d.order_state="已放款";
                break;
              case ls5:
                d.order_state="已还清";
                break;
              case ls6:
                d.order_state="已取消";
                d.already_month = d.l_month;
                break;
            }
          });
          vue.loans=data;
        })
      }
    });
  })

  function mytime(oldTimes1) {
    let time1 = oldTimes1.split(' ')[0];
    // //console.log("1、第二种方式time1:" + time1)
    let arrTime = oldTimes1.split(' ')[1].split(':');
    // //console.log("2、第二种方式arrTime:" + arrTime)
    let   time2 = arrTime.slice(1, arrTime.length-1).join(':');
    // //console.log("3、第二种方式time2:" + time2)
    let h = parseInt(arrTime[0]) + 8;
    // //console.log('4、第二种方式小时：', h);
    let newH = ((h < 24) ? h : (h % 24)).toString();
    if(newH<10){
      newH=" 0"+newH;
    }
    return time1 + ' ' + newH + ':' + time2;
  }
</script>
</html>
